<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <!-- 
        1:canvas双闭合标签:默认有WH  300 * 150
        2:鼠标右键的时候,图片另存为,浏览器当中一张图片
        3:你给这个标签添加文字内容，添加子节点没有任何意义
        4:canvas标签类似于img标签,width与height属性,canvas标签宽度与高度务必通过属性设置
    -->
      <!--白纸:画布-->
     <canvas width="600px" height="400px"></canvas>
</body>
</html>
<script>
     //绘制图形:矩形
     //获取canvas标签
     let canvas = document.querySelector('canvas');
     //获取画布上下文----画画的毛笔
     let ctx    = canvas.getContext('2d');

     //设置填充的颜色--默认黑色
     ctx.fillStyle="rgb(121,66,99)";
     //绘制矩形
     ctx.fillRect(100,100,200,50);
     //绘制矩形
     ctx.fillRect(0,200,50,200)
     ctx.fillRect(320,200,50,200)

</script>